<style lang="scss" scoped>
  @import '../../styles/search.scss' ;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select{
    margin-right: 10px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
<template>
  <div>
    <div class="commhightseach">
      <div class="seach-icon"><i class="el-icon-menu"></i>筛选</div>
      <div class="seachtype" @click="changetype" >{{showtotle>2?'普通搜索':'高级搜索'}}<i v-bind:class="{'el-icon-caret-bottom':isactive ,'el-icon-caret-top':!isactive}" ></i></div>
    </div>
    <el-form :inline="true" :model="form" class="demo-form-inline seachpanel" ref="seachform">
      <el-form-item label="手机号" prop="telephone">
        <el-input v-model="form.telephone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="trackerId" v-if="searchtype===1 || searchtype===2 ||searchtype===4" >
        <el-input v-model="form.trackerId" placeholder="设备编号"></el-input>
      </el-form-item>
      <el-form-item label="报警类型" v-if="searchtype===3 || searchtype===4">
        <el-select v-model="form.type" filterable placeholder="状态" @change="onSubmit">
          <el-option label="全部" value=""></el-option>
          <el-option label="震动报警" value="0"></el-option>
          <el-option label="移动报警" value="7"></el-option>
          <el-option label="断电报警" value="3"></el-option>
          <el-option label="电子围栏报警" value="5"></el-option>
        </el-select>
      </el-form-item>
      <span v-if="showtotle>3">
       <el-form-item label="使用人" prop="userName" v-if="searchtype===1 || searchtype===5 ||searchtype===6">
        <el-input v-model="form.userName" placeholder="使用人"></el-input>
       </el-form-item>
      <el-form-item label="通信卡号" prop="sim" v-if="searchtype===1">
        <el-input v-model="form.sim" placeholder="通信卡号"></el-input>
      </el-form-item>
        <el-form-item label="通信卡号" prop="iccid" v-if="searchtype===5 || searchtype===6">
        <el-input v-model="form.iccid" placeholder="通信卡号"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="number" v-if="searchtype!==5 && searchtype!==6">
        <el-input v-model="form.number" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="IMEI号" prop="imei">
        <el-input v-model="form.imei" placeholder="IMEI号"></el-input>
      </el-form-item>
      <el-form-item label="设备状态" prop="signalStatus" v-if="searchtype===1">
        <el-select v-model="form.signalStatus" filterable placeholder="状态" @change="onSubmit">
          <el-option label="全部" value=""></el-option>
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
          <el-option label="休眠" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警状态" prop="status" v-if="searchtype===1">
        <el-select v-model="form.status" filterable placeholder="状态" @change="onSubmit">
          <el-option label="全部" value=""></el-option>
          <el-option label="报警" value="1"></el-option>
          <el-option label="正常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="searchtype===1?'绑定时间':searchtype===4?'报警时间':searchtype===5?'缴费时间':'统计时间'" v-if="searchtype!==6" prop="bindTime">
      <el-date-picker
        v-model="form.bindTime"
        type="datetimerange"
        :picker-options="pickerOptions2"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="changetime"
      >
      </el-date-picker>
      </el-form-item>
      <el-form-item  label="缴费日期" v-if="searchtype==6" prop="endTimevalue">
        <el-date-picker
          v-model="form.endTimevalue"
          type="datetime"
          :editable="false"
          :clearable="false"
          @change="changeendtime"
        >
        </el-date-picker>
      </el-form-item>
      </span>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button  @click="resetForm('seachform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/babel">
  /**
   * @searchtype:
   *   1.设备查询
   *   2.超速查询
   *   3.报警统计
   *   4.报警记录
   *   5.缴费记录
   *   6.到期设备
   *   7.用户管理
   *   8.管理员管理
   * @
   * **/
  import moment from 'moment'
  export default {
    name:'SearchBox',
    props:['searchtype'],
    data() {
      return {
        select: '1',
        showtotle: 2,
        isactive: true,
        bindTime:'',
        placeholder:'请输入手机号',
        form: {
          signalStatus: '',
          status: '',
          type:'',
          endTimevalue:this.searchtype===6?new Date():'',
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
      }
    },
    methods: {
      onSubmit() {
        if(this.searchtype==6){
          this.form.endTime=moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
        }else {
          if(this.form.bindTime && this.form.bindTime!==''){
            this.form.beginTime=moment(this.form.bindTime[0]).format("YYYY-MM-DD HH:mm:ss")
            this.form.endTime=moment(this.form.bindTime[1]).format("YYYY-MM-DD HH:mm:ss")
          }else {
            delete this.form.beginTime
            delete this.form.endTime
          }
        }

        this.$emit('seach', {...this.form})
      },
      changeendtime(e){
        if(e && e!==''){
          this.form.endTime=moment(e).format("YYYY-MM-DD HH:mm:ss")
        }
        this.$emit('seach', {...this.form})
      },
      changetype() {
        if (this.showtotle > 2) {
          this.showtotle = 1
          this.isactive = true
        } else {
          this.showtotle = 5
          this.isactive = false
        }
      },
      changetime(e){
        if(e && e!==''){
          this.form.beginTime=moment(e[0]).format("YYYY-MM-DD HH:mm:ss")
          this.form.endTime=moment(e[1]).format("YYYY-MM-DD HH:mm:ss")
        }else {
          delete this.form.beginTime
          delete this.form.endTime
        }
        this.$emit('seach', {...this.form})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        if(this.searchtype==6){
          this.form.endTime=moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
        }else {
          delete this.form.endTimevalue
          delete this.form.beginTime
          delete this.form.endTime
        }

        this.$emit('seach', {...this.form})

      }
    }
  }

</script>

